<!--生产领料新增/编辑组件-->
<template>
    <div>
        <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="领料编号" prop="Number">
                        <el-input v-model="model.Number" placeholder="请输入领料编号" ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="工单编号" prop="WorkorderCode" label-width="110px">
                        <el-input v-model="model.WorkorderCode" :readonly="true" placeholder="请选择工单编号"
                            @focus="ProWorkorderSelected" ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="制单人" prop="Creator">
                        <el-input v-model="model.Creator" :readonly="true" ></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="订单状态" prop="Status">
                        <el-select v-model="model.Status" placeholder="请选择订单状态" >
                            <el-option label="未审核" value="0"></el-option>
                            <el-option label="已审核" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="领料仓库" prop="WarehouseName">
                        <el-select :value="model.WarehouseName" v-loading="WarehouseisLoading" @change="WarehouseChange"
                            @focus="WarehouseSelect" placeholder="请选择领料仓库" >
                            <el-option v-for="item in WarehouseSelectData" :key="item.Id" :label="item.WarehouseName"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="经办人" prop="EmployeesName">
                        <el-select :value="model.EmployeesName" v-loading="EmployeesisLoading" @change="EmployeesChange"
                            @focus="EmployeesSelect" placeholder="请选择经办人">
                            <el-option v-for="item in EmployeesSelectData" :key="item.Id" :label="item.Name"
                                :value="item"></el-option>
                        </el-select>

                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8">
                    <el-form-item label="领料日期" prop="PickDate">
                        <el-date-picker type="date" v-model="model.PickDate" placeholder="请选择领料日期" 
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="addItem" >新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="delsItem">删除</el-button>
            </div>
            <!--表单-->
            <el-table :data="ItemData" v-loading="isLoading" height="360px">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="ItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Kind" label="品类" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CurrCount" label="库存数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="数量" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.Count" @change="CountInput(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" :show-overflow-tooltip="true" width="120px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="delItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
        <!--对话框-->
        <el-dialog append-to-body :close-on-click-modal="false" title="选择产品" :visible.sync="ItemItemdialogDomain"
            width="60%">
            <SelectedItemFourStock @callback="AddItemCallback" :WareHouseId="this.model.WarehouseId.toString()"
                :ItemList="this.ItemData" v-if="ItemItemdialogDomain"></SelectedItemFourStock>
        </el-dialog>

        <el-dialog append-to-body :close-on-click-modal="false" title="选择领料工单"
            :visible.sync="ProWorkorderItemdialogDomain" width="60%">
            <SelectedProWorkorder @callback="ProWorkorderCallback" v-if="ProWorkorderItemdialogDomain">
            </SelectedProWorkorder>
        </el-dialog>

    </div>
</template>
<script>
import SelectedItemFourStock from '@/views/Product/ProductView/components/SelectedItemFourStock.vue'
import SelectedProWorkorder from '@/views/Productions/ProductionsView/components/SelectedProWorkorder.vue'
export default {
    components: {
        SelectedItemFourStock,
        SelectedProWorkorder
    },
    props: {
        model: {
            require: true,
            type: Object
        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            ItemData: [],
            EmployeesSelectData: [],
            WarehouseSelectData: [],
            isLoading: false,
            EmployeesisLoading: false,
            WarehouseisLoading: false,
            ItemItemdialogDomain: false,
            ProWorkorderItemdialogDomain: false,
            rules: {
                Number: { required: true, message: '请输入领料编号', trigger: 'blur' },
                WorkorderCode: { required: true, message: '请选择领料工单' },
                WarehouseName: { required: true, message: '请选择领料仓库' },
                Status: { required: true, message: '请选择状态' },
                PickDate: { required: true, message: '请选择领料日期', trigger: 'blur' },
                EmployeesName: { required: true, message: '请选择经办人' }
            }
        }
    },
    //组件创建时
    created() {
        //如果为编辑状态
        if (this.isUpdate) {
            this.GetOrderProductPickbyId(this.model.Id, this.model.WarehouseId)
        }
        else {
            this.model.Creator = localStorage.userName
        }
    },
    methods: {
        //提交按钮
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (this.ItemData.length > 0) {
                        var isAllCountValid = true
                        var positiveIntegerRegex = /^[1-9]\d*$/; // 正整数的正则表达式
                        for (var i = 0; i < this.ItemData.length; i++) {
                            if (!positiveIntegerRegex.test(this.ItemData[i].Count)) {
                                isAllCountValid = false
                                break
                            }
                        }
                        if (isAllCountValid) {
                            // 所有的 Count 都是正整数，可以提交表单
                            if (this.isUpdate) {
                                this.put()
                            }
                            else {
                                this.add()
                            }
                        } else {
                            this.showNotify('数量必须为正整数')
                            return false
                        }
                    }
                    else {
                        this.showNotify('请添加产品')
                        return false
                    }

                }
                else {
                    this.showNotify('请输入必填项')
                    return false
                }
            })
        },
        //重置按钮
        resetForm() {
            this.$refs['ruleForm'].resetFields()
        },
        //添加产品
        addItem() {
            if (this.model.WarehouseName == '') {
                this.showNotify('请先选择仓库')
            }
            else {
                this.ItemItemdialogDomain = true
            }

        },
        //批量删除产品
        delsItem() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请选择一项')
                return
            }
            this.$refs.dataForm.selection.forEach(row => {
                const index = this.dataForm.indexOf(row)
                this.dataForm.splice(index, 1)
            })
        },
        //删除产品行
        delItem(model) {
            let index = this.ItemData.indexOf(model)
            this.ItemData.splice(index, 1)
        },
        //领料仓库选择下拉框
        WarehouseSelect() {
            this.WarehouseisLoading = true
            this.$http.get('/api/Warehouse/GetAll')
                .then((res) => {
                    this.WarehouseSelectData = res.Data
                    this.WarehouseisLoading = false
                })
        },
        //领料仓库选择下拉框回调
        WarehouseChange(model) {
            this.model.WarehouseId = model.Id
            this.model.WarehouseName = model.WarehouseName
        },
        //经办人选择下拉框
        EmployeesSelect() {
            this.EmployeesisLoading = true
            this.$http.get('/api/Employees/GetAll')
                .then((res) => {
                    this.EmployeesSelectData = res.Data
                    this.EmployeesisLoading = false
                })
        },
        //经办人选择下拉框回调
        EmployeesChange(model) {
            this.model.EmployeesId = model.Id
            this.model.EmployeesName = model.Name
        },
        //选择产品对话框回调
        AddItemCallback() {
            this.ItemItemdialogDomain = false
            let arr = []
            this.ItemData.map(x => {
                var obj = new Object()
                //处理所属字段
                this.$set(obj, 'ItemId', x.ItemId)
                this.$set(obj, 'ItemCode', x.ItemCode)
                this.$set(obj, 'ItemName', x.ItemName)
                this.$set(obj, 'Model',x.Model)
                this.$set(obj, 'Spec', x.Spec)
                this.$set(obj, 'Kind',x.Kind)
                this.$set(obj, 'UnitOfMeasure', x.UnitOfMeasure)
                this.$set(obj, 'CurrCount', x.CurrCount)
                arr.push(obj)
            })
            this.ItemData = arr
        },
        //领料工单点击事件
        ProWorkorderSelected() {
            if (this.model.WarehouseId !== "") {
                this.ProWorkorderItemdialogDomain = true
            }
            else {
                this.showNotify('请先选择领料仓库')
            }
        },
        //选择领料工单对话框回调
        ProWorkorderCallback(model) {
            this.ProWorkorderItemdialogDomain = false
            this.model.WorkorderCode = model.WorkorderCode
            this.GetBomItembyId(model.ProductId)
        },
        //立即创建
        add() {
            this.$http.postForm('/api/OrderProductPick', { model: this.model, OrderProductPickItemString: JSON.stringify(this.ItemData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback')
                })
        },
        //立即保存
        put() {
            this.$http.putForm('/api/OrderProductPick', { model: this.model, OrderProductPickItemString: JSON.stringify(this.ItemData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback')
                })
        },
        //根据生产领料编号和仓库编号获取生产领料明细表方法
        GetOrderProductPickbyId(OrderProductPickId, WarehouseId) {
            this.isLoading = true
            this.$http.get('/api/OrderProductPick/GetOrderProductPickbyId', {
                params: {
                    OrderProductPickId: OrderProductPickId,
                    WareHouseId: WarehouseId
                }
            })
                .then((res) => {
                    console.log(res.Data)
                    this.ItemData = res.Data.map(x => {
                        x.CurrCount += x.Count;
                        return x;
                    })
                    this.isLoading = false
                })
        },
        //数量输入框回调
        CountInput(model) {
            var positiveIntegerRegex = /^[1-9]\d*$/ // 正整数的正则表达式
            if (!positiveIntegerRegex.test(model.Count)) {
                this.showNotify('请输入正整数！')
                model.Count = 1
            }

            if (model.Count > model.CurrCount) {
                model.Count = model.CurrCount
                this.showNotify('超出当前库存，请及时补货！')
            }
        },
        //根据仓库编号和产品编号查询BOM组成方法
        GetBomItembyId(Id) {
            this.isLoading = true
            this.$http.get('/api/OrderProductPick/GetBomItembyId', {
                params: {
                    WareHouseId: this.model.WarehouseId,
                    ItemId: Id
                }
            })
                .then((res) => {
                    console.log(res.Data)
                    this.ItemData = res.Data
                    this.isLoading = false
                })
        }
    }
}
</script>
